<template>
  <div ref="sceneContainer" class="scene-container"></div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; // 引入OrbitControls
import * as dat from 'dat.gui'; // 引入dat.gui

export default {
  name: 'ShipModel',
  data() {
    return {
      tilt: {
        x: 0,
        y: 0,
        z: 0
      },
      gui: null // 用于存储dat.gui实例
    };
  },
  mounted() {
    this.init3DScene();
  },
  beforeUnmount() { // Vue 2 使用 beforeDestroy，Vue 3 使用 beforeUnmount
    if (this.gui) {
      this.gui.destroy();
    }
  },
  methods: {
    init3DScene() {
      console.log('init3DScene')
      // 场景、相机、渲染器
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();

      // 设置背景颜色为白色
      renderer.setClearColor(0xffffff, 1);
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.sceneContainer.appendChild(renderer.domElement);

      // 添加光源
      const light = new THREE.AmbientLight(0xffffff, 1);
      scene.add(light);

      // 加载船舶模型
      const loader = new GLTFLoader();
      let model;
      loader.load(
        '/model/boat.glb', // 这里替换成你的船舶模型路径
        (gltf) => {
          console.log('模型加载完成')
          model = gltf.scene;
          scene.add(model);

          // 调整模型位置和缩放
          model.scale.set(1, 1, -1);
          model.position.set(0, 0, 0);

          // 视角控制（OrbitControls）
          const controls = new OrbitControls(camera, renderer.domElement);
          controls.enableDamping = true; // 开启阻尼，平滑过渡
          controls.dampingFactor = 0.25; // 设置阻尼系数
          controls.screenSpacePanning = false; // 防止上下旋转导致的坐标问题
          controls.maxPolarAngle = Math.PI / 2; // 限制上下旋转角度，防止模型倒立

          // 设置相机初始视角偏左上角
          camera.position.set(5, 3, 7); // 将相机设置在船的前方偏左上方位置
          camera.lookAt(model.position); // 让相机朝向船的模型位置

          // 判断gui是否已经存在，不存在则创建
          if (!this.gui) {
            this.gui = new dat.GUI();
            // 明确指定步长为 0.01
            this.gui.add(this.tilt, 'x', -Math.PI / 4, Math.PI / 4, 0.01).onChange(() => {
              if (model) {
                model.rotation.x = this.tilt.x;
              }
            });
            this.gui.add(this.tilt, 'y', -Math.PI / 4, Math.PI / 4, 0.01).onChange(() => {
              if (model) {
                model.rotation.y = this.tilt.y;
              }
            });
            this.gui.add(this.tilt, 'z', -Math.PI / 4, Math.PI / 4, 0.01).onChange(() => {
              if (model) {
                model.rotation.z = this.tilt.z;
              }
            });
          }

          // 渲染循环
          const animate = () => {
            requestAnimationFrame(animate);
            controls.update(); // 使得控制器更新
            renderer.render(scene, camera);
            // 实时打印相机位置
            console.log(`相机位置: x=${camera.position.x}, y=${camera.position.y}, z=${camera.position.z}`);
          };
          animate();
        },
        undefined,
        (error) => {
          console.error('模型加载出错:', error);
        }
      );
    }
  }
};
</script>

<style scoped>
.scene-container {
  width: 100%;
  height: 100%;
}
</style>
